<template>
    <view class="comment-item">
        <view class="header-box">
            <view class="user-info">
                <up-avatar :src="item.user?.avatar" size="36"></up-avatar>
                <view>{{item.user?.nickname}}</view>
            </view>
            <view>{{item.createtime_text}}</view>
        </view>
        <view class="content">
            {{item.content}}
        </view>
    </view>
</template>
<script setup>
const props = defineProps({
    item: {
        type: Object,
        default: () => {
        }
    }
})
</script>
<style scoped lang="scss">
.comment-item {
    background-color: #fff;
    padding: 24rpx 32rpx;
    .header-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6rpx;
        .user-info{
            display: flex;
            align-items: center;
            gap: 12rpx;
        }
    }
    .content{
        padding: 0 24rpx 0 72rpx;
    }
}
</style>
